<template>
  <div>
    <div class="titletopXX">
    <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
    </div>
    <div class="content">
      <div class="item" v-for="item in goodList" :key="item.id">
        <div @click="jumpToDetail(item)">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 10px; font-size: 20px">{{ item.userName }}</span>
            <van-image
              v-if="item.orderStatus == 0"
              radius="4"
              class="img"
              :src="require('../../AdminPages/imgs/SY.png')"
              width="67px"
              height="21px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="item.orderStatus == -1"
              radius="4"
              class="img"
              :src="require('../../AdminPages/imgs/QX.png')"
              width="67px"
              height="21px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="item.orderStatus == 2"
              radius="4"
              class="img"
              :src="require('../../AdminPages/imgs/SH.png')"
              width="67px"
              height="21px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="item.orderStatus == 1"
              radius="4"
              class="img"
              :src="require('../../AdminPages/imgs/WC.png')"
              width="67px"
              height="21px"
              mode="widthFix"
            ></van-image>
          </div>
          <div class="item_info">
            <span>出行时间</span><span>{{ item.detailList[0].travelDate }}</span>
          </div>
          <div class="item_info">
            <span>出行人员</span>
            <span>{{
              item.detailList[0].convalesceAndEntouragesList
                .map((item) => item.employeeName)
                .join(",")
            }}</span>
          </div>
        </div>
        <div v-if="item.orderStatus == 0">
          <van-button block round color="#36c2a8" @click="onConfirm(item)"> 取消报名 </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getServiceOrderUserList } from "@/api/realAssets/icsharedstation/DD/index.js"
import { getpersonalInformation } from "../../common/RYXX"
import { Dialog, Toast } from "vant"
import { updateServiceOrderUser } from "@/api/realAssets/icsharedstation/manager.js"

export default {
  data () {
    return {
      title: "登记记录",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      goodList: []
    }
  },
  methods: {
    queryList () {
      getServiceOrderUserList({
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        postId: JSON.parse(getpersonalInformation()).postId,
        pageNumber: 1,
        pageSize: 999,
        orderStatus: "-1,0,1,2,3,4",
        orderTime: "",
        orderNumber: "",
        userId: JSON.parse(getpersonalInformation()).userId
      })
        .then((res) => {
          if (res.resultMessage == "SUCCESS") {
            this.goodList = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onConfirm (item) {
      Dialog.confirm({
        title: "取消行程",
        message: "确定取消该行程吗？"
      })
        .then(() => {
          updateServiceOrderUser({
            id: item.id
          }).then((res) => {
            if (res.resultMessage === "SUCCESS") {
              Toast.success("发送申请成功")
              this.$router.push({
                name: "i_life_lydj_submitForm"
              })
            }
          })
        })
        .catch(() => {})
    },
    jumpToDetail (item) {
      let li = encodeURIComponent(JSON.stringify(item))
      this.$router.push({
        path: "icsharedstation_LYDJ_DJJLdetail",
        query: {
          DJJL: li
        }
      })
    },
    onClickLeft () {
      this.$router.push({
        path: "icsharedstation_LYDJ_submitForm"
      })
    }
  },
  mounted () {
    this.queryList()
  }
}
</script>

<style lang="less">
.content {
  background-color: #f8fbff;
  min-height: 90vh;
}
.item {
  width: 85%;
  margin: 20px auto;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid #f8fbff;
  .item_info {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
  }
}
.titletopXX{
  height: 45px;
}
</style>
